<template>
  <div id="exam">
    <div class="search-box">
      <div class="exam-status">
        <span>考试状态</span>
        <Select class="status-select">
            <!-- <Option v-for="(item,index) in statusList" :key="index" :value='item.value'>{{ item.value }}</Option> -->
            <Option v-for="(item,index) in statusList" :key="index" :value='item'>{{ item }}</Option>
        </Select>
        </div>
      <div class="exam-name">
        <span>试卷名称</span>
        <Input v-model="examName" size="small" placeholder="请输入试卷名称"></Input><Button type="primary" icon="ios-search" style="width:3rem;"></Button>
      </div>
      <div class="btn-box"><button>重置</button></div>
    </div>
    <div class="exam-content">内容</div>
  </div>
</template>

<script lang="ts">
import { Component , Vue } from 'vue-property-decorator'

@Component({
  name:'Exam',
  components:{}
})
export default class Exam extends Vue{
  statusList:string[]=['待考试','已提交','已批改'];
  // statusList:Object[]=[{value:'待考试'},{value:'已提交'},{value:'已批改'}];
  examName:string='';
}
</script>

<style lang="less" scoped>
#exam{
  padding: 2rem 0;
  border-radius: 0.5rem;
  background-color: #fff;
  .search-box{
    display: flex;
    height: 2rem;
    margin-bottom: 2rem;
    .search-box,
    .exam-status,
    .exam-name{
      display: flex;
    }
    .exam-status,
    .exam-name{
      span{
        width: 8rem;
        line-height: 2rem;
        font-size: 15px;
        font-weight: 700;
        color:#2d8cf0;
      }
    }
    .exam-status{
      .status-select{
        width: 10rem;
      }
    }
    .exam-name{
      .ivu-input-small{
        height: 2rem;
      }
      input{
        height: 2rem;
      }
    }
    .btn-box{
      margin-left: 1rem;
      button{
        cursor: pointer;
        border-style: none;
        outline: none;
        height: 2rem;
        padding: 0.2rem 1rem;
        border-radius: 0.3rem;
        border:1px solid #2d8cf0;
        color: #2d8cf0;
        background-color: #fff;
      }
    }
  }
}
</style>